import React from 'react';
import { Button, Card, Checkbox, Form, Input, message } from 'antd';
import './index.css';
import { useNavigate } from 'react-router-dom';
import { login } from '../../services/user';
import { GlobalContext } from '../../contexts/GlobalContext';
import { useContext } from 'react';
import{BankOutlined,ShopTwoTone,setTwoToneColor,getTwoToneColor } from "@ant-design/icons";

const App = ({ setRoute }) => {
  const navigate = useNavigate();
  const globalContext = useContext(GlobalContext);

  setTwoToneColor('#FE4E84');
  getTwoToneColor(); // #eb2f96

    const onFinish = (values) => {
        login(values).then((res) => {
            console.log(res);
            const { code, msg, result } = res.data;
            if (code === 1) {
                message.success(msg);
                // 存储全局user数据
                globalContext.dispatch({ type: 'login', param: result });
                navigate('/');
            } else {
                message.error(msg);
            }
        });
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

  return (
      <div className="login-page">
          <div className="background-container">
              <div className="login-container">
                  <Card style={{ width: 300,borderColor:"gray"}}>
                      <div className="header-container" style={{textAlign: "center", alignItems: "center",marginBottom:10 }}>
                          <ShopTwoTone style={{fontSize:80,marginBottom:5}}/>
                          <h2 style={{color:"#FE4E84"}}>Admin-web</h2>
                      </div>
                      <Form
                          name="basic"
                          initialValues={{ remember: true }}
                          onFinish={onFinish}
                          onFinishFailed={onFinishFailed}
                          autoComplete="off"
                      >
                          <Form.Item
                              label="用户名"
                              name="username"
                              rules={[
                                  {
                                      required: true,
                                      message: '请输入用户名',
                                  },
                              ]}
                          >
                              <Input placeholder="admin/123456" />
                          </Form.Item>

                          <Form.Item
                              label="密 码 "
                              name="password"
                              rules={[
                                  {
                                      required: true,
                                      message: '请输入密码',
                                  },
                              ]}
                          >
                              <Input.Password />
                          </Form.Item>

                          <Form.Item
                              name="remember"
                              valuePropName="checked"
                              wrapperCol={{
                                  span: 16,
                              }}
                          >
                              <Checkbox>自动登录</Checkbox>
                          </Form.Item>

                          <Form.Item
                              wrapperCol={{
                                  offset:4,
                                  span: 16,
                              }}
                          >
                              <Button type="primary" htmlType="submit" block style={{backgroundColor:"#FE4E84"}}>
                                  登录
                              </Button>
                          </Form.Item>
                      </Form>
                  </Card>
              </div>
          </div>
      </div>
  );
};

export default App;